<template>
  <view class="content">
    <zHeaderNav :params="headerParam" @back="getBack"></zHeaderNav>
    <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
    <view class="wrap">
      <u-row gutter="16" class="d-row">
        <u-col span="3">
          <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="4">
          <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col span="5">
          <view class="demo-layout bg-purple-dark"></view>
        </u-col>
      </u-row>
      <u-row gutter="16" justify="space-between" class="d-row">
        <u-col span="3">
          <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="9">
          <view class="demo-layout bg-purple-light"></view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script setup lang="ts">
import zHeaderNav from "@/components/z-header-nav.vue"
const title = ref('Hello')
const userStore = useUserStore();
const headerParam = reactive({
  navColor: 'white',
  title: '首页1122',
  return: 1,
  lefTitle: '返回'
})
const list = [
  '寒雨连江夜入吴',
  '平明送客楚山孤',
  '洛阳亲友如相问',
  '一片冰心在玉壶'
]

const getBack =($event:string)=>{
  console.log($event);
}
</script>

<style lang="scss">
.wrap {
  padding: 24rpx;
}

.u-row {
  margin: 40rpx 0;
}

.demo-layout {
  height: 80rpx;
  border-radius: 8rpx;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>
